<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static %}
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>查看入侵</title>

    <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
    <link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"
            integrity="sha512-XmZS54be9JGMZjf+zk61JZaLZyjTRgs41JLSmx5QlIP5F+sSGIyzD2eJyxD4K6kGGr7AsVhaitzZ2WTfzpsQzg=="
            crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
	<link rel="stylesheet" href="/media/video/style1.css">
	<link rel="stylesheet" href="/media/video/style.css">
	 <link rel="stylesheet" href="/media/video/style2.css">
	 <link rel="stylesheet" href="/media/back/back.css">


    <style>
        .font-type {
            color: white;
        }

        .position1 {
            position: relative;
            float: left;
            width: 20%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

        body {
            position: relative;
            overflow-x: hidden;
        }

        body,
        html {
            height: 100%;
            background-color: white;
        }

        .nav .open>a {
            background-color: transparent;
        }

        .nav .open>a:hover {
            background-color: transparent;
        }

        .nav .open>a:focus {
            background-color: transparent;
        }

        /*-------------------------------*/
        /*           Wrappers            */
        /*-------------------------------*/
        #wrapper {
            height: 0px;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            padding-left: 0;
            transition: all 0.5s ease;
        }

        #wrapper.toggled {
            padding-left: 220px;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 220px;
        }

        #wrapper.toggled #page-content-wrapper {
            margin-right: -220px;
            position: absolute;
        }

        #sidebar-wrapper {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            background: #1a1a1a;
            height: 100%;
            left: 220px;
            margin-left: -220px;
            overflow-x: hidden;
            overflow-y: auto;
            transition: all 0.5s ease;
            width: 0;
            z-index: 1000;
        }

        #sidebar-wrapper::-webkit-scrollbar {
            display: none;
        }

        #page-content-wrapper {
            padding-top: 70px;
            width: 100%;
        }


        /*-------------------------------*/
        /*       Hamburger-Cross         */
        /*-------------------------------*/
        .hamburger {
            background: black;
            border: none;
            display: block;
            height: 32px;
            margin-left: 15px;
            position: fixed;
            top: 20px;
            width: 32px;
            z-index: 999;
        }

        .hamburger:hover {
            outline: none;
        }

        .hamburger:focus {
            outline: none;
        }

        .hamburger:active {
            outline: none;
        }

        .hamburger.is-closed:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-closed:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        .hamburger.is-closed:hover .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            top: 0;
        }

        .hamburger.is-closed:hover .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            bottom: 0;
        }

        .hamburger.is-closed .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            top: 5px;
        }

        .hamburger.is-closed .hamb-middle {
            background-color: rgba(255, 255, 255, 0.7);
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-closed .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            bottom: 5px;
        }

        .hamburger.is-closed .hamb-top,
        .hamburger.is-closed .hamb-middle,
        .hamburger.is-closed .hamb-bottom,
        .hamburger.is-open .hamb-top,
        .hamburger.is-open .hamb-middle,
        .hamburger.is-open .hamb-bottom {
            height: 4px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        .hamburger.is-open .hamb-top {
            -webkit-transform: rotate(45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open .hamb-middle {
            background-color: #ffffff;
            display: none;
        }

        .hamburger.is-open .hamb-bottom {
            -webkit-transform: rotate(-45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-open:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        /*-------------------------------*/
        /*          Dark Overlay         */
        /*-------------------------------*/
        .overlay {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .top_div {
            background-color: #25304c;
            padding-top: 10px;
        }


        #main {
            height: 100%;
            background-color: #27304c;
            overflow: hidden;
            position: relative;
        }

        .content_div {
            height: 98%;
            background-color: #1e243c;
            padding: 0px 18px;

        }

        #left_div {
            float: left;
            width: 78%;
            height: 92%;
            background-color: #303f60;
            border-radius: 15px 15px 0px 0px;
        }

        #leftTop-div {
            border-radius: 15px 15px 0px 0px;
        }

        #right_div {
            float: left;
            width: 20.4%;
            height: 95%;
            margin-left: 23px;
            background-color: #1f273e;
        }

        #monitorcontrol_content_div {
            margin: 10px 10px;
            height: 95%;
            /* border: 1px ridge #222943; */
            box-shadow: -3px 3px 10px 10px rgba(0, 0, 0, 0.4);
            border-radius: 10px;
            background-color: #222943;
        }

        #monitorcontrol_content_top_div {

            height: 30px;
            background-color: #465483;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            border-radius: 10px 10px 0px 0px;
        }

        #monitorcontrol_content_div li {
            color: #ffffff;
            padding: 20px;
            cursor: pointer;
        }

        #monitorcontrol_content_div li:hover {
            color: #62b8f5;
            /* background-color: #402d5c; */
        }

        #monitorControl1_div {
            margin-left: 10px;
            width: 21%;
            height: 600px;
            float: left;
            background-color: #27304c;
        }

        .left_top_div {
            height: 70px;
            font-size: 20px;
            font-family: 'Times New Roman', Times, serif;
            line-height: 70px;
        }

        .mybtn {
            padding: 5px 50px;
        }

        #record-table thead {
            color: #748ec8;
        }

        #record-table td {
            border: 0;
            color: #fff;
        }

        #record-table tr:hover {
            background-color: #38466b;
        }

        #left_div input {
            border: 0;
            content: '年月日';
        }

        .color-div {
            background-color: #1e243c;
        }


        .dark-matter {

            /* margin-left: auto; */

            /* margin-right: auto; */

            /* max-width: 500px; */

            background: #555;

            /* padding: 20px 30px 20px 30px; */

            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

            color: #D3D3D3;

            text-shadow: 1px 1px 1px #444;

            /* border: none; */
            /* border-radius: 5px; */

            /* -webkit-border-radius: 5px; */

            /* -moz-border-radius: 5px; */

        }

        .dark-matter form {
            width: 100%;
        }

        .dark-matter h1 {

            padding: 0px 0px 10px 40px;

            display: block;

            border-bottom: 1px solid #444;

            margin: -10px -30px 30px -30px;

        }

        .dark-matter h1>span {

            display: block;

            font-size: 11px;

        }

        .dark-matter label {

            display: block;

            margin: 0px 0px 5px;

        }

        .dark-matter label>span {

            float: left;

            width: 20%;

            text-align: right;

            padding-right: 10px;

            margin-top: 10px;

            font-weight: bold;

        }

        .dark-matter input[type="text"],
        .dark-matter input[type="email"],
        .dark-matter textarea,
        .dark-matter select {

            border: none;

            color: #525252;

            height: 25px;

            line-height: 15px;

            margin-bottom: 16px;

            margin-right: 6px;

            margin-top: 2px;

            outline: 0 none;

            padding: 5px 0px 5px 5px;

            width: 70%;

            border-radius: 2px;

            -webkit-border-radius: 2px;

            -moz-border-radius: 2px;

            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

            background: #DFDFDF;

        }

        .dark-matter select {

            background: #DFDFDF url('/media/images/down2.png') no-repeat right;



            appearance: none;

            -webkit-appearance: none;

            -moz-appearance: none;

            text-indent: 0.01px;

            text-overflow: '';

            width: 70%;

            height: 35px;

            color: #525252;

            line-height: 25px;

        }

        .dark-matter textarea {

            height: 100px;

            padding: 5px 0px 0px 5px;

            width: 70%;

        }

        .dark-matter .button {
            margin: 10px 100px;
            background: #FFCC02;

            border: none;

            padding: 10px 70px 10px 70px;

            color: #585858;

            border-radius: 4px;

            -moz-border-radius: 4px;

            -webkit-border-radius: 4px;

            text-shadow: 1px 1px 1px #FFE477;

            font-weight: bold;

            box-shadow: 1px 1px 1px #3D3D3D;

            -webkit-box-shadow: 1px 1px 1px #3D3D3D;

            -moz-box-shadow: 1px 1px 1px #3D3D3D;

        }

        .dark-matter .button:hover {

            color: #333;

            background-color: #EBEBEB;

        }

        #photoDiv{
            overflow:auto;
        }


        #tdiv{
            overflow:auto;
            backgroud-color:#fff;
            height:600px;
        }

         #tdiv::-webkit-scrollbar{
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
         }

         #tdiv::-webkit-scrollbar-thumb{
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
            background: #535353;
         }
          #tdiv::-webkit-scrollbar-track{
             /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            /* background: #EDEDED; */
            background: rgba(0, 0, 0, 0.05);
          }
    </style>
</head>

<body>
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="photoModalLabel">入侵图片</h4>
            </div>
            <div class="modal-body"  id="photoDiv">
                <img src="#" id="photoImg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header dark-matter">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新人信息录入</h4>
                <span>录入照片</span>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form enctype="multipart/form-data" action="{% url 'trustedStaffForm' %}" method="post" class="dark-matter" id="trustForm">
                      {%csrf_token %}
                    <label>
                        <span>姓名 :</span>
                        <input id="name" type="text" name="name" placeholder="姓名"/>

                    </label>

                    <label>

                        <span>年龄:</span>

                        <input id="age" type="text" name="age" placeholder="年龄"/>

                    </label>

                    <label>
                        <span>性别:</span>
                        <select name="selection">
                            <option value="man">男</option>
                            <option value="woman">女</option>
                        </select>
                    </label>
                    <label>
                        <span>邮箱 :</span>
                        <input id="email" type="email" name="email" placeholder="有效的邮箱地址"/>
                    </label>

                    <label>
                        <span>人脸照片 :</span>
                        <img id="image-preview" width="200" height="200">
                        <input style="margin-left:170px;" type="file" id="file" name="upload_image"
                               accept="image/gif, image/jpeg, image/png, image/jpg">
                    </label>

<!--                    <label style="margin-bottom: 0;">-->
<!--                        <span>&nbsp;</span>-->
<!--                        <input type="button" class="button" value="Send"/>-->
<!--                    </label>-->
                </form>
            </div>
            <div class="modal-footer" style="background-color: #555555;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick=mySubmit('trustForm')>提交</button>
            </div>
        </div>
    </div>
</div>
<div class="menuToggle"></div>
  <div class="sidebar">
    <ul>
      <li class="logo" style="--bg: #333;">
        <a href="">
        <div class="icon"><img style="width: 80px;" src="../media/back/gas.png" alt="Gas Station Icon"></div>
        <div class="text">智慧加油站</div>
        </a>
      </li>
      <div class="menu-list">
     <!--   <li style="--bg:#f44336;" class="active">
          <a href="#">
            <div class="icon"><ion-icon name="home-outline"></ion-icon></div>
            <div class="text">首页</div>
          </a>
        </li> -->
              <!-- <li><a href="{% url 'gly-rt-monitor' %}">实时监控</a> </li>
                        <li><a href="{% url 'record' %}"> 查看入侵记录 </a></li>
                          <li><a href="{%url 'vedioPage' %}"> 查看视频 </a></li>
                        <li> <a href="{% url 'statistic' %}"> 入侵统计</a></li> -->
        <li style="--bg:darkblue;">
         <a href="{% url 'gly-rt-monitor' %}">
            <div class="icon"><ion-icon name="eye-outline"></ion-icon></div>
            <div class="text">实时监控</div>
          </a>
        </li>

        <li style="--bg:blue;" class="active">
         <a href="{% url 'record' %}">
            <div class="icon"><ion-icon name="warning-outline"></ion-icon></div>
            <div class="text">查看入侵</div>
          </a>
        </li>

<!--        <li style="&#45;&#45;bg:#ffa117;">-->
<!--          <a href="{%url 'vedioPage' %}">-->
<!--            <div class="icon"><ion-icon name="videocam-outline"></ion-icon></div>-->
<!--            <div class="text">查看视频</div>-->
<!--          </a>-->
<!--        </li>-->

        <li style="--bg:#292c39;">
         <a href="{% url 'statistic' %}">
            <div class="icon"><ion-icon name="analytics-outline"></ion-icon></div>
            <div class="text">入侵统计</div>
          </a>
        </li>

<!--        <li style="&#45;&#45;bg:purple;">-->
<!--        <a href="#" data-toggle="modal" data-target="#myModal">-->
<!--            <div class="icon"><ion-icon name="person-outline"></ion-icon></div>-->
<!--            <div class="text">行人信息导入</div>-->
<!--          </a>-->
<!--        </li>-->
          {% if status > 0 %}
		<li style="--bg:#ffa117;">
		  <a href="{% url 'infoManager' %}">
		    <div class="icon"><ion-icon name="document-outline"></ion-icon></div>
		    <div class="text">信息管理</div>
		  </a>
		</li>
           {% endif %}
<!--		<li style="&#45;&#45;bg:#333;">-->
<!--		  <a href="{% url 'setMonitorPage' %}">-->
<!--		    <div class="icon"><ion-icon name="settings-outline"></ion-icon></div>-->
<!--		    <div class="text">监控区域设置</div>-->
<!--		  </a>-->
<!--		</li>-->
      </div>
	  <div class="bottom">
	    <li style="--bg:#333;">
	      <a href="#">
	        <div class="icon">
	          <div class="imgBx">
	            <img src="../media/video/images/user.jpg" alt="user">
	          </div>
	        </div>
	        <div class="text">manager</div>
	      </a>
	    </li>

	    <li style="--bg:#333;">
	      <a href="{% url 'login'%}">
	        <div class="icon"><ion-icon name="log-out-outline"></ion-icon></div>
	        <div class="text">退出</div>
	      </a>
	    </li>

	  </div>
    </ul>

  </div>
<style>
    .container {
        width: 1300px;
        height: 750px;
        margin: auto;
        /* border: 1px solid blue; */
        padding: 20px;
        box-sizing: border-box;
   /*     outline: 1px solid darkblue; */
        position: relative;
        top: 10px;
        left: 50px;
        font-family: Arial, sans-serif;
        overflow: auto;
    }

   .table-wrapper {
       max-height: 100%;
       overflow: hidden;
   }

   .table {
       width: 100%;
       border-collapse: collapse;
       margin-top: 20px;
       table-layout: fixed;
   }

   .table th,
   .table td {
       padding: 15px;
       text-align: left;
       border: 1px solid #ccc;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .table th {
       background-color: blue;
       color: #fff;
       font-weight: bold;
   }

   .table tr:nth-child(even),
   .table tr:nth-child(odd) {
       background-color: white;
   }

   .table tr:hover {
       background-color: rgba(0, 128, 255, 0.5); ;
       color: #fff;
   }

   .table td:empty::before {
       content: "N/A";
       color: #999;
       font-style: italic;
   }

   .table td:empty:hover::before {
       color: #e67e22;
   }
</style>
<style>
.container {
  background-color: rgba(0, 128, 255, 0.5); /* 设置淡蓝色透明背景 */
  border: 1px solid #fff; /* 设置白色边框 */
  padding: 20px; /* 设置内边距 */

  margin: 0 auto; /* 居中显示 */
}
</style>

<div class="container" >
  <div id="monitoring-area" class="page">
    <div class="row" style="background-color: darkblue;border: 1px solid #fff; /* 设置白色边框 */">
        <div class="col-md-5" style="padding: 0px 30px;">
            <span style="color: #6489d0; margin: 0px 20px;">日期</span>
            <input type="text" style="display: inline-block; width: 160px; margin: 10px 0px;"
                class="form-control form_datetime" id="startTime" name="addtime" placeholder="开始时间">
            <span style="color: #6489d0; margin: 0px 10px">至</span>
            <input type="text" style="display: inline-block; width: 160px; margin: 10px 0px;"
                class="form-control form_datetime" id="endTime" name="addtime" placeholder="结束时间">
             <button class="btn btn-primary" style="background-color:blue;margin-top:0%
  " id="switch-btn1" onclick="switchPage()">查看视频记录</button>
        </div>
		<div class="col-md-2 ">
		    <div  >
		    		    <ul class="camera-list">
		    		        <div style="background-color: darkblue;color:white"><strong>加油站监控点</strong></div>
		    				<li><span class="glyphicon glyphicon-camera" style="color:white"></span> <strong style="color:white"> 加油站入口</strong></li>
		    		        <li><span class="glyphicon glyphicon-camera" style="color:white"></span> <strong style="color:white"> 加油站出口</strong>/li>
		    		        <li><span class="glyphicon glyphicon-camera" style="color:white" ></span> <strong style="color:white"> 加油机</strong></li>
		    		        <li><span class="glyphicon glyphicon-camera" style="color:white"></span> <strong style="color:white"> 危险区域</strong></li>
		    		    </ul>
            </div>
		</div>
        <div class="col-md-5 " style="margin-top:50px">
            <button class="btn btn-primary mybtn" id="query-btn">查询</button>
            <button class="btn btn-info mybtn" onclick="Export()">导出</button>
            <button class="btn btn-success mybtn" onclick="javascript:location.reload();">刷新</button>
        </div>




    </div>


    <table class="table" style="border: 1px solid #fff;" >
        <thead>
            <tr>
                <th>序号</th>
                <th>入侵时间</th>
                <th>图片</th>
                <th>摄像头ID</th>
                <th>监控区域ID</th>
                <th>报警级别</th>

                <th>操作</th>
            </tr>
        </thead>
        <tbody id="record-tablebody1">
            {% for rec in records %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ rec.intrusionTime | date:"Y-m-d H:i:s" }}</td>
                <td></td>
                <td>{{ rec.cameraId }}</td>
                <td>{{ rec.region }}</td>
                <td>{{ rec.alarmLevel }}</td>

                <td></td>
            </tr>




            {% endfor %}
        </tbody>
    </table>

  </div>
  <div id="alarm-records" class="page" style="display: none;"> <table class="table" style="margin-top:2%">
         <button class="btn btn-primary" style="background-color:blue;margin-top:0%
  " id="switch-btn" onclick="switchPage()">返回入侵记录</button>
   <thead>
   <tr>
   <th>序号</th>
   <th>视频号</th>
   <th>拍摄起始时间</th>
   <th>详情</th>
   </tr>
   </thead>
   <tbody id="vedioTableBody">

   {% for rec in records %}
   <tr>
   <td>{{ forloop.counter }}</td>
   <td>{{ rec.videoName }}</td>
   <td>{{ rec.startTime }}</td>
   <td></td>
   </tr>

   {% endfor %}
   </tbody>
   </table>

  </div>
</div>
</div>
<script>
  // 切换页面函数
  function switchPage() {
    var monitoringArea = document.getElementById("monitoring-area");
    var alarmRecords = document.getElementById("alarm-records");

    if (monitoringArea.style.display === "none") {
      // 显示监控区域，隐藏监控记录
      monitoringArea.style.display = "block";
      alarmRecords.style.display = "none";
    } else {
      // 显示监控记录，隐藏监控区域
      monitoringArea.style.display = "none";
      alarmRecords.style.display = "block";
    }
  }
</script>

  </script>
  <script>
  const modal = document.getElementById('myModal');
  const setMonitorLink = document.querySelector('.sidebar li.active');

  modal.addEventListener('hidden.bs.modal', function () {
    setMonitorLink.classList.remove('active');
    const pedestrianImportLink = document.querySelector('.sidebar li a[data-target="#myModal"]');
    pedestrianImportLink.parentElement.classList.add('active');
  });


      var nums={{nums|safe}};
      var tabletrs=document.querySelectorAll('#vedioTableBody tr');
      for(var i=0; i< nums;i++){
         var td=tabletrs[i].children[3];
         td.innerHTML='<button class="btn btn-info">详情</button>';
         var but=td.children[0];
         but.setAttribute('data-toggle', 'modal');
         but.setAttribute('data-target', '#videoModal');

         but.onclick=function(){
  <!--            var videoSrc=document.getElementById('videoSrc');-->
              var videoSrc=document.getElementById('videos');
              var src=this.parentNode.parentNode.children[1].innerHTML;
              var rsrc="/media/videos/"+src;
              console.log(rsrc);
              console.log(typeof rsrc);

              videoSrc.setAttribute("src",rsrc);
         }
      }




      function mySubmit(formId){
          var form=document.getElementById(formId);
          form.submit();
      }


      let fileInput = document.getElementById('file');
      let info = document.getElementById('info');
      let preview = document.getElementById('image-preview');
      // 监听change事件:
      fileInput.addEventListener('change', function () {
          // 清除背景图片:
          preview.style.backgroundImage = '';
          if (!fileInput.value) {
              info.innerHTML = '没有选择文件';
              return;
          }
          let file = fileInput.files[0];
          let size = file.size;
          if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
              alert('不是有效的图片文件!');
              return;
          }
          // 读取文件:
          let reader = new FileReader();
          reader.onload = function (e) {
              let data = e.target.result;
              console.log(preview, 'a标签')
              preview.src = data
          };
          // 以DataURL的形式读取文件:
          reader.readAsDataURL(file);
      });



      $('.form_datetime').datetimepicker({
          format: 'yyyy-mm-dd hh:ii:ss',
          autoclose: true,
          /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
          language: 'zh-CN',
          dateFormat: 'yyyy-mm-dd',//日期显示格式
          timeFormat: 'HH:mm:ss',//时间显示格式
          todayBtn: 1,
          autoclose: 1,
          minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
          minuteStep: 1//分钟间隔1分钟
      });





      $(document).ready(function () {
          var trigger = $('.hamburger'),
              overlay = $('.overlay'),
              isClosed = false;
          trigger.click(function () {
              hamburger_cross();
          });
          function hamburger_cross() {
              if (isClosed == true) {
                  overlay.hide();
                  trigger.removeClass('is-open');
                  trigger.addClass('is-closed');
                  isClosed = false;
              } else {
                  overlay.show();
                  trigger.removeClass('is-closed');
                  trigger.addClass('is-open');
                  isClosed = true;
              }
          }
          $('[data-toggle="offcanvas"]').click(function () {
              $('#wrapper').toggleClass('toggled');
          });
      });






      //查询功能
  <!--    var btn = document.getElementById('query-btn')-->
  <!--    btn.onclick = function () {-->
  <!--        queryTable();-->
  <!--    }-->
  <!--    function queryTable() {-->
  <!--        // startTime,endTime-->
  <!--        startTime = document.getElementById('startTime').value;-->
  <!--        endTime = document.getElementById('endTime').value;-->
  <!--        if (!startTime || !endTime) {-->
  <!--            return-->
  <!--        }-->
  <!--        var startDate = new Date(startTime);-->
  <!--        var endDate = new Date(endTime);-->
  <!--        trs = document.querySelectorAll('.recBody tr');-->
  <!--        console.log(trs);-->
  <!--        for (var i = 0; i < trs.length; i++) {-->
  <!--            var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);-->


  <!--            if (startDate <= recDate && recDate <= endDate) {-->
  <!--                trs[i].style.display = '';-->
  <!--            } else {-->
  <!--                trs[i].style.display = 'none';-->
  <!--            }-->
  <!--        }-->
  <!--    }-->

  </script>










</body>
 <script src="js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script>
    const menuToggle = document.querySelector('.menuToggle'),
          sidebar = document.querySelector('.sidebar'),
          Menulist = document.querySelectorAll('.menu-list li')
    menuToggle.onclick = function(){
      menuToggle.classList.toggle('active')
      sidebar.classList.toggle('active')
    }

    function activeLink() {
      Menulist.forEach((item) =>
        item.classList.remove('active')
      )
      this.classList.add('active')
    }

    Menulist.forEach((item) =>
      item.addEventListener('click', activeLink)
    )
  </script>

  <script>
    const modal = document.getElementById('myModal');
    const invasionLink = document.querySelector('.menu-list li a[href="#record"]');
    const monitoringLink = document.querySelector('.menu-list li a[href="#gly-rt-monitor"]');
    const pedestrianImportLink = document.querySelector('.menu-list li a[href="#person-import"]');
    const infoManagerLink = document.querySelector('.menu-list li a[href="#info-manager"]');
    const setMonitorLink = document.querySelector('.menu-list li a[href="#set-monitor"]');
	const setvedioPageLink = document.querySelector('.menu-list li a[href="#vedioPage"]');

    modal.addEventListener('hidden.bs.modal', function () {
      invasionLink.parentElement.classList.add('active');
    });

    modal.querySelector('button[type="submit"]').addEventListener('click', function () {
      invasionLink.parentElement.classList.add('active');
    });
  </script>

<script src="/static/js/jquery.table2excel.js"></script>


<script>
    function mySubmit(formId){
        var form=document.getElementById(formId);
        form.submit();
    }


    var num={{num|safe}};
    console.log(num);
    var urls={{images|safe}};
    console.log(urls);
    var tabletrs=document.querySelectorAll('#record-tablebody1 tr');
    for(var i=0; i<num;i++){
       var td=tabletrs[i].children[2];
       td.innerHTML='<button class="btn btn-info">详情</button>';
       var but=td.children[0];
       but.setAttribute('data-toggle', 'modal');
       but.setAttribute('data-target', '#photoModal');

// <!--       photoDiv photoImg  xmlns="http://www.w3.org/1999/xhtml"-->
// <!--       var img=document.getElementById('photoDiv');-->
// <!--       img.style.background="url( "+urls[i]+" )";-->
// <!--       var url=urls[i];-->
// <!--       console.log(url);-->
       but.onclick=function(){
            var img=document.getElementById('photoImg');
            var id=this.parentNode.parentNode.children[0].innerHTML;
            img.setAttribute("src",urls[id-1]);
            <!-- img.style.src=urls[i];-->
       }

        var td1=tabletrs[i].children[6];
        td1.innerHTML = ' <form action="'+ " {%  url 'deleteRecord' %} "+'"'+ ' method="post" >' + '{% csrf_token %}'+'<a href="javascript:;"  class="btn btn-warning">删除</a></form>';
        var a=td1.getElementsByTagName('a')[0];
        a.onclick=function(){
            var tbod=document.getElementById('record-tablebody1');
            tbod.removeChild( this.parentNode.parentNode.parentNode);
            var id=this.parentNode.parentNode.parentNode.children[1].innerHTML;

            var form =this.parentNode;
            var input =document.createElement('input');
            input.setAttribute('name','time');
            input.setAttribute('value',id);
            console.log(id);
<!--   var input = $("<input name='time' value=id />");-->
            form.append(input);
            document.body.appendChild(form);
            form.submit();
        }
    }



    //导出excel
    function Export() {
        $('#record-table').table2excel({
            filename: "recor.xls"
        });
    }

    $('.form_datetime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        autoclose: true,
        /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        minuteStep: 1//分钟间隔1分钟
    });

    $(document).ready(function () {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function () {
            hamburger_cross();
        });
        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }
        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });

    //查询功能
    var btn = document.getElementById('query-btn')
    btn.onclick = function () {
        queryTable();
    }
    function queryTable() {
        // startTime,endTime
        startTime = document.getElementById('startTime').value;
        endTime = document.getElementById('endTime').value;


        console.log(startTime + '\n' + endTime);
        if (!startTime || !endTime) {
            return
        }
        var startDate = new Date(startTime);
        var endDate = new Date(endTime);



        trs = document.querySelectorAll('#record-tablebody1 tr');
        console.log(trs);
        for (var i = 0; i < trs.length; i++) {
            var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);

            console.log(recDate);
            console.log(startDate <= recDate && recDate <= endDate);
            if (startDate <= recDate && recDate <= endDate) {
                trs[i].style.display = '';
            } else {
                trs[i].style.display = 'none';
            }
        }
    }

    var lis = document.querySelectorAll('#camera-ul li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            var text = this.innerText.replace(/\s+/g, "");
            var trs = document.querySelectorAll('#record-tablebody1 tr');
            console.log(text);
            for (var i = 0; i < trs.length; i++) {
                var tdText = trs[i].getElementsByTagName("td")[3].innerHTML;
                if (tdText == text) {
                    trs[i].style.display = '';
                } else {
                    trs[i].style.display = 'none';
                }
            }
        }
    }

let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });


</script>

</html>